@import '../../app/variables.css';

:root {
  --dropdown-box-shadow: 0 8px 16px 0 rgba(29, 72, 119, 0.16);
  --dropdown-list-hover-color: rgba(204, 217, 228, 0.2);
}

.dropdown {
  & ul {
    box-shadow: var(--dropdown-box-shadow) !important;
    width: 160px;
    margin-left: 2px;
  }

  & li,
  & .selected {
    padding: 12px;
    color: var(--color-primary-standard);
    font-weight: var(--font-weight-semi-bold);
  }

  & .values {
    & li:hover:not(:first-child) {
      background-color: var(--dropdown-list-hover-color) !important;
    }
  }

  & .inputLabel {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-grayscale-dark) !important;
    font-weight: var(--font-weight-bold);
  }

  & .inputFilled {
    margin-top: 10px;
    color: var(--color-primary-standard) !important;
    font-size: 12px;
    font-weight: bold;
  }

  & .value {
    padding-bottom: 0px;

    &::after {
      border: none;
    }
  }

  & .disabled {
    cursor: default !important;
    color: var(--color-primary-standard) !important;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 27px;
  }
}

.dropdown.active {
  & .value {
    opacity: 0;
  }
}

.arrow {
  position: absolute;
  left: 95px;
  top: 35px;
  color: var(--color-primary-standard);
  cursor: pointer;
}

input:-webkit-autofill {
  box-shadow: inset 0 0 0px 9999px var(--color-white);
}
